
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>游玩</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" type="text/css" href="css/swiper/css/swiper.css"/>
    <link rel="stylesheet" href="css/comm.css" />

  </head>
  <body>

  <div class="page-group">
      <div class="page">
          <header class="bar bar-nav">
              <a class="button-link pull-left open-panel" data-panel='#panel-left-demo'>
                <span class="icon icon-menu"></span>
              </a>
              <h1 class="title">我的生活</h1>
          </header>
          
          <nav class="bar bar-tab">
              <a class="tab-item external active">
                  <span class="icon icon-home"></span>
                  <span class="tab-label">首页</span>
              </a>
              <a class="tab-item external" href="../sui-mobile1/views/around.html">
                  <span class="icon icon-star"></span>
                  <span class="tab-label">周游</span>
              </a>
              <a class="tab-item external" href="../sui-mobile1/views/opinion.html">
                  <span class="icon icon-friends"></span>
                  <span class="tab-label">众说</span>
              </a>
              <a class="tab-item external" href="../sui-mobile1/views/my.html">
                  <span class="icon icon-me"></span>
                  <span class="tab-label">我</span>
              </a>
          </nav>
          
          <div class="bar bar-header-secondary">
					  <div class="searchbar">
					    <a class="searchbar-cancel">取消</a>
					    <div class="search-input">
					      <label class="icon icon-search" for="search"></label>
					      <input type="search" id='search' placeholder='输入关键字...'/>
					    </div>
					  </div>
					</div>
					
          
          <div class="content">
          	<div class="content-padded">
          	
          	<div class="swiper-container">
						    <div class="swiper-wrapper">
						        <div class="swiper-slide">
						        	<img src="img/bna.jpg"/>
						        </div>
						        
						        <div class="swiper-slide">
						        	<img src="img/fjb.jpg"/>
						        </div>
						        
						        <div class="swiper-slide">
						        	<img src="img/fjc.jpg"/>
						        </div>
						    </div>
						    <div class="swiper-pagination"></div>
						</div>
						</div>

						<div class="content-padded grid-demo">
							<div class="row">
					      
					      
					      <div class="col-25">
					      	<img src="img/lyc.jpg" class="col-img"/>
					      	<h5>境内游</h5>
					      </div>
					      
					      <div class="col-25">
					      	<img src="img/lyb.jpg" class="col-img"/>
					      	<h5>镜外游</h5>
					      </div>
					      
					      <div class="col-25">
					      	<img src="img/lyd.jpg" class="col-img"/>
					      	<h5>附近游</h5>
					      </div>
					      
					      <div class="col-25">
					      	<img src="img/lya.jpg" class="col-img"/>
					      	<h5>海岛游</h5>
					      </div>
					      
					    </div>							
						</div>
						
						<h2>
							<span class="icon icon-star"></span>
							<span class="icon icon-star"></span>
							<span class="icon icon-star"></span>
							四周游
							<span class="icon icon-star"></span>
							<span class="icon icon-star"></span>
							<span class="icon icon-star"></span>
						</h2>
						
						<a href="views/card-detail.html">
							<div class="card">
						    <div class="card-header">桂林</div>
						    <div class="card-content">
						      <div class="list-block media-list">
						        <ul>
						          <li class="item-content">
						            <div class="item-media">
						              <img src="img/dfa.jpg" width="44">
						            </div>
						            <div class="item-inner">
						              <div class="item-title-row">
						                <div class="item-title">桂林山水甲天下</div>
						              </div>
						              <div class="item-subtitle">留君夜饮对萧湘，从此归舟客梦长。岭上梅花侵雪暗，归时还拂桂花香。</div>
						            </div>
						          </li>
						        </ul>
						      </div>
						    </div>
						    <div class="card-footer">
						      <span>2015/01/15</span>
						      <span>5 评论</span>
						    </div>
						  </div> 
					  </a>
					  
					  <div class="card">
					    <div class="card-header">云南</div>
					    <div class="card-content">
					      <div class="list-block media-list">
					        <ul>
					          <li class="item-content">
					            <div class="item-media">
					              <img src="img/dfb.jpg" width="44">
					            </div>
					            <div class="item-inner">
					              <div class="item-title-row">
					                <div class="item-title">香格里拉</div>
					              </div>
					              <div class="item-subtitle">香格里拉，是迪庆藏语，意为“心中的日月”。</div>
					            </div>
					          </li>
					        </ul>
					      </div>
					    </div>
					    <div class="card-footer">
					      <span>2015/01/15</span>
					      <span>5 评论</span>
					    </div>
					  </div>   
					  
					  <div class="card">
					    <div class="card-header">杭州</div>
					    <div class="card-content">
					      <div class="list-block media-list">
					        <ul>
					          <li class="item-content">
					            <div class="item-media">
					              <img src="img/dfc.jpg" width="44">
					            </div>
					            <div class="item-inner">
					              <div class="item-title-row">
					                <div class="item-title">西湖十景</div>
					              </div>
					              <div class="item-subtitle">“西湖十景”是指浙江省杭州市著名旅游景点西湖及其周边的十处特色风景。</div>
					            </div>
					          </li>
					        </ul>
					      </div>
					    </div>
					    <div class="card-footer">
					      <span>2015/01/15</span>
					      <span>5 评论</span>
					    </div>
					  </div>
					  
					  <div class="card">
					    <div class="card-header">江南</div>
					    <div class="card-content">
					      <div class="list-block media-list">
					        <ul>
					          <li class="item-content">
					            <div class="item-media">
					              <img src="img/dfd.jpg" width="44">
					            </div>
					            <div class="item-inner">
					              <div class="item-title-row">
					                <div class="item-title">烟雨江南</div>
					              </div>
					              <div class="item-subtitle">江南可采莲，莲叶何田田。鱼戏莲叶间。鱼戏莲叶东，鱼戏莲叶西，鱼戏莲叶南，鱼戏莲叶北。</div>
					            </div>
					          </li>
					        </ul>
					      </div>
					    </div>
					    <div class="card-footer">
					      <span>2015/01/15</span>
					      <span>5 评论</span>
					    </div>
					  </div>
					  
					  <div class="card">
					    <div class="card-header">白水寨</div>
					    <div class="card-content">
					      <div class="list-block media-list">
					        <ul>
					          <li class="item-content">
					            <div class="item-media">
					              <img src="img/dfe.jpg" width="44">
					            </div>
					            <div class="item-inner">
					              <div class="item-title-row">
					                <div class="item-title">白水寨风景区</div>
					              </div>
					              <div class="item-subtitle">白水寨风景名胜区位于增城区派潭镇，面积约170㎞²，北回归线穿越其中，被誉为北回归线上的瑰丽翡翠，属山岳型风景名胜区。</div>
					            </div>
					          </li>
					        </ul>
					      </div>
					    </div>
					    <div class="card-footer">
					      <span>2015/01/15</span>
					      <span>5 评论</span>
					    </div>
					  </div>
						
      </div>
    </div>       
  </div>
  
  <!--侧栏-->
  <div class="panel-overlay"></div>
	<!-- Left Panel with Reveal effect -->
	<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
	  <div class="content-block">
	    <p>游玩欢迎你O(∩_∩)O</p>
	    
	    <div class="list-block media-list">
		    <ul>
		      <li>
		        <a href="#" class="item-content">
		          <div class="item-media"><img src="img/txc.jpg" style='width: 2.2rem;'></div>
		          <div class="item-inner">
		            <div class="item-title-row">
		              <div class="item-title">陈小羽</div>
		            </div>
		            <div class="item-subtitle">2019年1月22日</div>
		          </div>
		        </a>
		      </li>
		    </ul>
		  </div>
		  
	  </div>
	  <div class="list-block">
	    <div class="content-block">
	    	<p><a href="#" class="button button-big button-round close-panel">关闭侧栏</a></p>
		    <p><a href="#" class="button button-big button-round">退出游玩</a></p>
		  </div>
	  </div>
	</div>


    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript'>
        $.init();    
        console.log($.device);
    </script>
    <script src="css/swiper/js/swiper.js" type="text/javascript" charset="utf-8"></script>
    <script type='text/javascript'>        
	  var mySwiper = new Swiper ('.swiper-container', {
//	    direction: 'vertical', // 垂直切换选项
			autoplay:true,
	    loop: true, // 循环模式选项
	    
	    
	    // 如果需要分页器
	    pagination: {
	      el: '.swiper-pagination',
	    },
	    
	    // 如果需要前进后退按钮
	    navigation: {
	      nextEl: '.swiper-button-next',
	      prevEl: '.swiper-button-prev',
	    },
	    
	    // 如果需要滚动条
	    scrollbar: {
	      el: '.swiper-scrollbar',
	    },
	  })        
	  </script>
  </body>
</html>
